<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./axios.min.js"></script>
    <h2>添加</h2>
    <!-- 因为ID是不能给别人看到的,那么需要将ID给隐藏起来,type=hidden刚好是隐藏域 -->
    <input type="hidden" id="id">
    账号: <input type="text" placeholder="请输入姓名" id="name"><br>
    密码: <input type="text" placeholder="请输入密码" id="password"><br>
    性别: <input type="text" placeholder="请输入性别" id="gender"><br>
    号码: <input type="text" placeholder="请输入号码" id="phone"><br>
    <button id="addupdate">添加</button>
    <script>
        // 获取index.html传入过来的参数
        // console.log(decodeURI(location.href)); // 获取的是url地址
        // console.log(decodeURI(location.search).split("=")[1]); //获取URL传入过来的参数

        document.querySelector("h2").innerHTML = decodeURI(location.search).split("=")[1];
        document.getElementById("addupdate").innerHTML = decodeURI(location.search).split("=")[1]

        /* 
            当我们点击添加或者是修改的按钮之后
                1. 获取添加的按钮
                2. 给添加的按钮绑定点击事件
                3. 当我们点击之后触发的函数里面 
                    A. 获取表单里面的信息
                    B. 对表单里面的信息进行非空(正则)校验
                    C. 发送axios请求,将数据传入到服务器当中
        */
        const addupdate = document.getElementById("addupdate")
        addupdate.onclick = function(){
            // 获取表单当中信息
            const id = document.getElementById("id").value;
            const name = document.getElementById("name").value;
            const password = document.getElementById("password").value;
            const gender = document.getElementById("gender").value;
            const phone = document.getElementById("phone").value;
            // 非空校验
            if(!name.trim().length || !password.trim().length || !gender.trim().length || !phone.trim().length){
                return alert("请输入完整的信息")
            }
            // 添加
            if(decodeURI(location.search).split("=")[1] == '添加'){
               // 发送ajax
                axios({
                    url:"http://localhost:8080/admin/student/add",
                    method:"POST",
                    data:{
                        name,password,gender,phone
                    }
                })
                .then(res=>{
                    if(res.data.code){
                        window.alert(res.data.msg)
                        window.location.href = "./index.html"
                    }
                }) 
            }else{
                // 修改
                /* 
                    1. 我们需要收集所有表单里面的信息(包括隐藏域) 
                    2. 非空校验(正则表达式)
                    3. 发送ajax请求
                */
                axios({
                    url:"http://localhost:8080/admin/student/edit",
                    method:"post",
                    data:{
                        id,name,password,gender,phone
                    }
                })
                .then(res=>{
                    // 提醒
                    alert("修改学生信息成功")
                    window.location.href = "./index.html"
                })
            }
        }

        /* 渲染学生信息 */
        function renderStudent(){
            /* 
                1. 从storage里面获取一份学生信息
                2. 将学生信息渲染到表单当中
                3. 注意: ID需要渲染在隐藏域当中
            */
            const result = JSON.parse(sessionStorage.getItem("studentInfo"))
            document.getElementById("id").value = result.id;
            document.getElementById("name").value = result.name;
            document.getElementById("password").value = result.password
            document.getElementById("gender").value = result.gender
            document.getElementById("phone").value = result.phone
        }
        renderStudent();
    </script>
</body>
</html>